var demoApp = {};

demoApp.updateSelectorsLog = function (profiler) {
	var table = $('selectors-log'),
		stats = '<tr>\
	      			<th>#</th>\
	      			<th width="40%">Selector type</th>\
					<th>Total queries</th>\
					<th width="50%">Queries (results)</th>\
	    		</tr>',
		i = 1;
	
	
	if (table)
	    for (var selector in profiler.selectors) {
		var queries = profiler.selectors[selector],
			len = queries.length,
			innerContent = '';
	
	    for (var j = 0; j < len; j++)
			innerContent += queries[j].query + ' (' + queries[j].count + ')' + '<br/>';
	
		stats += '<tr valign="top">\
					<td>' + i++ + '</td>\
					<td><strong>' + selector + '</strong></td>\
					<td>' + len + '</td>\
					<td>' + innerContent + '</td>\
				 </tr>';

		table.update(stats);
	}
	
}

demoApp.updateEventLog = function (profiler) {
	var table = $('events-log'),
		stats = '<tr>\
	      			<th width="5%">#</th>\
	      			<th width="60%">Handler</th>\
	      			<th width="10%">Execution time</th>\
	      			<th width="25%">Used selectors</th>\
	    		</tr>',
		i = 1;
	
	
	if (table) {
		var len = profiler.events.length,
			innerContent = '';
	
		    for (var j = 0; j < len; j++) {
			with (profiler.events[j])
				stats += '<tr valign="top">\
							<td>' + (j + 1) + '</td>\
							<td>' + name + '</td>\
							<td>' + (time != null ? time + ' msec' : 'Not fired yet') + '</td>\
							<td>' + selectors.join('<br/>') + '</td>\
						 </tr>';
		}
	
		table.update(stats);
	}
}

var myDecoProfiler = new PrototypeProfiler({'onSelectorAdded': demoApp.updateSelectorsLog, 'onOnLoadEventAdded': demoApp.updateEventLog, 'namespace': 'demoApp'});

demoApp.sandbox = {
	container: null,
	elements: ['a', 'p', 'span', 'div'],
	classes: ['', 'foo', 'bar', 'class1'],
	elements2Generate: 20,
	
	
	init: function() {
		this.container = $('sandbox');
		if (!this.container)
			return;

		this.container.update();
		
		for (var i = 0; i < this.elements2Generate; i++) {
			var element = this.elements[Math.floor(this.elements.length * Math.random())],
				className = this.classes[Math.floor(this.classes.length * Math.random())],
				id = 'id' + i;

			this.container.insert(
				new Element(element, {
								'class': className,
								'id': id,
								'href': (element == 'a' ? '#' : null)
							}).update(element + '#' + id + (className ? '.' + className : ''))
			);
		}
	}
};

demoApp.selectorForm = {
	form: null,
	field: null,
	
	init: function() {
		this.form = $('app').down('form');
		if (!this.form)
			return;
		
		this.field = this.form.down('#selector');
		this.form.observe('submit', this.highLightByQuery.bindAsEventListener(this));
	},
	
	highLightByQuery: function(e) {
		e.stop();
		var sandbox = demoApp.sandbox.container;
		
		sandbox.select('*').invoke('removeClassName', 'highlighted');
		
		sandbox.select(this.field.getValue()).invoke('addClassName', 'highlighted');
		return false;
	}
}

// Testing various observers here

document.observe('dom:loaded', demoApp.sandbox.init.bind(demoApp.sandbox));
document.observe('dom:loaded', demoApp.selectorForm.init.bind(demoApp.selectorForm));

document.observe('dom:loaded', function(e) {
	$('selector').focus();
});